回到昨天的問題，目標要的是一個可以隨時間經過倒數的計時器，並不是靜止的狀態
這時候得用到 useEffect 來處理 timer 的問題

回顧一下 useEffect 的用法
useEffect 接收兩個參數，第一個參數是在 component render 後執行的 function，第二個參數是 []，陣列中為 state 或 props 名稱
當第二個參數內的 state 或 props 被變更時，便執行第一個參數的函式，如果第二個參數是 [] (empty array)，第一個參數則會在 component render 後執行

在 Counter.js 內增加 useEfect 的段落

// useEffect 處理 timer
  useEffect(() => {
    let id = setInterval(() => {
      setTimeLeft(calulateTimeLeft());
    }, 1000);
    return function () {
      clearInterval(id);
    };
  }, [timeLeft]);

這時候就可以看到計時器隨時間慢慢倒數了～

codesandbox一樣在這裡

延長挑戰情境題..

剛好在寫程式的時候被女朋友 / 老婆看到了
她說怎麼可以只倒數 10/10 ，你是不是忘記我們的 交往/結婚紀念日了
現在得增加可以手動輸入 紀念日 的欄位，並將倒數時間也顯示在頁面上

參考資料

https://upmostly.com/tutorials/build-a-react-timer-component-using-hooks
https://stackoverflow.com/questions/57137094/implementing-a-countdown-timer-in-react-with-hooks
https://overreacted.io/zh-hans/making-setinterval-declarative-with-react-hooks/